<template>
  <div>
    <div v-if="this.category.categoryId!==0" style="width: 700px;margin: 0 auto;text-align: center">
      <span>{{category.categoryName}}</span>
    </div>
    <div v-for="blog in blogList" :key="blog.id" style="width: 700px;margin: 0 auto;">
      <el-card class="box-card" shadow="hover" style="border-bottom: none;padding: 0 !important;">
        <div class="clearfix" style="text-align: center">
          <span>{{ blog.title }}</span>
        </div>
        <div v-html="blog.description" style=""></div>
        <div v-for="tag in blog.tags" :key="tag.id" style="display: inline" >
          <el-button disabled size="mini"  :style="`background-color:${tag.color}`" style="font-weight: bold;margin:0px 5px 0px 0px;color: #FFFFFF">
            {{ tag.tagName }}
          </el-button>
        </div>
        <el-button style="display:block;margin:0 auto" @click="clickReadButton(blog.id)" round>阅读全文</el-button>
      </el-card>
    </div>

    <el-pagination
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="totalCount"
      layout=" prev, pager, next"
      style="text-align: center">
    </el-pagination>
  </div>
</template>

<script>
import NProgress from 'nprogress'
import {SET_COMMENT_QUERY_PARAMS} from "@/store/mutations-types";

export default {
  name: "BlogList",
  data() {
    return {
      blogList: [],
      pageIndex: 1, //当前页
      pageSize: 5, //每页显示数据量
      totalCount: 0, //总页数
      category: {
        categoryId: 0,
        categoryName: '',
      },
      tag:{
        tagId:0
      }
    }
  },
  methods: {
    getBlogList() {
      NProgress.start();
      this.$http({
        url: '/blog/list',
        params: {
          'page': this.pageIndex,
          'limit': this.pageSize,
          'categoryId': this.category.categoryId,
          'tagId':this.tag.tagId
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log("是发达发的说法发大水："+data);
          this.blogList = data.data.list;
          this.totalCount = data.data.totalCount;
          NProgress.done();
        }
      })
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getBlogList()
    },
    //点击阅读全文按钮
    clickReadButton(id) {
      sessionStorage.setItem("webPage",'0');
      sessionStorage.setItem("belongId",id);
      //this.$store.commit(SET_COMMENT_QUERY_PARAMS,{webPage:0,belongId:id}) //设置评论所属页面和文章id
      this.$router.push(`/blogDetail/${id}`)
    },

  },
  mounted() {
    this.getBlogList()
  },
  watch: {
    //如果路由有变化，会执行该方法
    $route: {
      handler: function () {
        if (this.$route.query.categoryId != null) {
          this.category.categoryId = this.$route.query.categoryId;
          this.category.categoryName = this.$route.query.categoryName;
        }else {
          this.category.categoryId=0
          this.category.categoryName=''
        }
        if (this.$route.query.tagId != null) {
          this.tag.tagId = this.$route.query.tagId;
        }else {
          this.tag.tagId=0
        }
        this.getBlogList()
      }
    }
  }
}
</script>

<style scoped>





</style>
